<template>
        <div class="login-div flex-row-center">
            <div class="left-login flex-column-center">
                <img src="src/assets/old-man.svg" class="login-img">
            </div>
            <div class="right-login flex-column-center">
                <div id="login-card" class="login-card flex-column-center">
                <div class="panel-title-text">{{ panelTitle }}</div>
                <div class="login-panel">
                    <el-form el-form :model="admin" ref="ruleFormRef">
                        <el-form-item prop="username" v-if="!isLogin">
                            <input placeholder="请输入用户名" v-model="admin.name" class="login-input">
                        </el-form-item>
                        <el-form-item prop="password">
                            <input
                            type="password"
                            placeholder="请输入密码"
                            v-model="admin.password"
                            class="login-input"
                            >
                        </el-form-item>
                      <el-form-item>
                        <el-button style="width: 80%; margin-top: 10px" type="primary" @click="LoginView()">登录</el-button>
                      </el-form-item>
                    </el-form>
                </div>
                </div>
            </div>
        </div>
</template>
<script>

import request from "@/utils/request";

export default {
  name: "Login",
  data() {
    return {
      admin: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    login() {
      request.post("/admin/login", this.admin).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.login-btn{
    font-weight: bold;
    background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
    color: white;
    padding: 15px;
    width: 5vw;
    border-radius: 20px;
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
    border: none;
    transition: all 0.2s ease-in-out;
}

.login-input{
    width: 100%;
    background: white;
    border: none;
    padding: 15px 20px;
    border-radius: 20px;
    box-shadow: #cff0ff 0px 10px 10px -5px;
}
.login-input:focus {
    border-color: #3498db; 
    outline: none; 
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5); 
}

.login-input::placeholder {
  color: rgb(170, 170, 170);
}
.login-div{
    width: 99vw;
    min-height: 100vh;
}
.login-img{
    width: 25vw;
}
.login-card{
    width: 30vw;
    height: 40vh;
    background: #F8F9FD;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
    border-radius: 40px;
    border: 5px solid rgb(255, 255, 255);
    padding: 25px 35px;
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
    margin: 20px;
    gap: 15px;
}

.left-login{
    width: 49vw;
}
.right-login{
    width: 50vw;
}
.panel-title-text{
    font-weight: 900;
    font-size: 30px;
    color: rgb(16, 137, 211);
    text-align: center;
}
</style>
